<template>
  <div>
    <el-card>
      <div slot="header">
        <div style="float: right">
          <el-button size="small">重置</el-button>
          <el-button size="small" type="primary">筛选</el-button>
        </div>
        筛选搜索
      </div>
      <el-form label-width="80px">
        <el-form-item label="输入搜索: ">
          <el-input />
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-button @click="addItem">添加角色</el-button>
    </el-card>
    <el-card>
      <el-table :data="items">
        <el-table-column type="index" label="编号" />
        <el-table-column label="id" prop="id" />
        <el-table-column label="角色名称" prop="name" />
        <el-table-column label="描述" prop="description" />
        <el-table-column label="添加时间" prop="createdTime" />
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              @click="$router.push({name:'role-alloc-menu',params:{roleId:scope.row.id}})"
            >
              分配菜单
            </el-button>
            <el-button   size="small"
              @click="$router.push({name:'role-alloc-resource',params:{roleId:scope.row.id}})"
            >
              分配资源 </el-button
            ><br />
            <el-button @click="editRow(scope.row)" size="small">
              编辑
            </el-button>
            <el-button type="danger" @click="deleteRow(scope.row)" size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <DialogAddOrEdit ref="dialogAdd" />
    <DialogAddOrEdit ref="dialogEdit" :id="editItemId" />
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import dayjs from 'dayjs'
import { HasId, ID } from '@/types'
import { wrapAsyncWithLoading } from '@/utils/helper'
import { getAll, removeRole } from '@/services/role'
import PromiseDialog from '@/components/PromiseDialog.vue'
import DialogAddOrEdit from './components/DialogAddOrEdit.vue'
export default Vue.extend({
  name: 'RoleIndex',
  components: {
    DialogAddOrEdit
  },
  data () {
    return {
      loading: false,
      editItemId: '' as ID,
      items: []
    }
  },
  created () {
    wrapAsyncWithLoading(this, 'loading', 'loadItems')
    this.loadItems()
  },
  methods: {
    async loadItems () {
      const { data } = await getAll()
      if (data.code === '000000') {
        this.items = data.data.map((item: {createdTime: ID}) => {
          item.createdTime = dayjs(item.createdTime).format(
            'YYYY-MM-DD HH:mm:ss'
          )
          return item
        })
        return
      }
      this.$message.error('载入角色失败，请刷新页面')
    },
    async addItem () {
      try {
        await (this.$refs.dialogAdd as PromiseDialog).open()
      } catch (error) {
        if (error) {
          this.$message.error(error)
          this.loadItems()
        }
        return
      }
      this.$message.success('添加成功')
      this.loadItems()
    },
    async editRow (row: HasId) {
      this.editItemId = row.id
      try {
        await (this.$refs.dialogEdit as PromiseDialog).open()
      } catch (error) {
        if (error) {
          this.$message.error(error)
          this.loadItems()
        }
        return
      }
      this.$message.success('编辑成功')
      this.loadItems()
    },
    async deleteRow (row: HasId) {
      debugger
      try {
        await this.$confirm('确定删除么，此操作不可撤销')
      } catch (error) {
        return
      }
      try {
        const { data } = await removeRole(row.id)
        if (data.code !== '000000') {
          throw new Error('删除失败')
        }
      } catch (error) {
        if (error) {
          this.$message.error(error)
          this.loadItems()
        }
        return
      }
      this.$message.success('已删除')
      this.loadItems()
    }
  }
})
</script>
